/* 现代简约主题系统 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 全局基础样式 */
@layer base {
  * {
    @apply transition-all duration-300;
  }

  html {
    @apply font-sans;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  }

  /* 主题切换基础 */
  :root {
    --transition-theme: all 0.3s ease-in-out;
  }

  /* 亮色模式 */
  :root[data-theme="light"] {
    --color-bg-primary: theme(colors.white);
    --color-bg-secondary: theme(colors.light.secondary);
    --color-bg-surface: theme(colors.light.surface);
    --color-text-primary: theme(colors.gray.900);
    --color-text-secondary: theme(colors.gray.600);
    --color-border: theme(colors.light.border);
    --shadow-base: theme(boxShadow.lg);
    --shadow-card: theme(boxShadow.xl);
  }

  /* 暗色模式 */
  :root[data-theme="dark"] {
    --color-bg-primary: theme(colors.dark.primary);
    --color-bg-secondary: theme(colors.dark.secondary);
    --color-bg-surface: theme(colors.dark.surface);
    --color-text-primary: theme(colors.gray.100);
    --color-text-secondary: theme(colors.gray.300);
    --color-border: theme(colors.dark.border);
    --shadow-base: theme(boxShadow.soft-dark);
    --shadow-card: theme(boxShadow.soft-dark);
  }

  body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: var(--transition-theme);
  }
}

/* 组件层样式 */
@layer components {
  /* 现代卡片组件 */
  .modern-card {
    @apply bg-white dark:bg-dark-primary rounded-md shadow-lg dark:shadow-soft-dark border border-light-border dark:border-dark-border transition-all duration-300 hover:shadow-xl dark:hover:shadow-soft-dark;
  }

  /* 现代按钮基础样式 */
  .modern-btn {
    @apply rounded-md px-4 py-2 font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  /* 主按钮 */
  .modern-btn-primary {
    @apply modern-btn bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500 shadow-md hover:shadow-lg transform hover:scale-[0.98];
  }

  /* 次要按钮 */
  .modern-btn-secondary {
    @apply modern-btn bg-light-secondary dark:bg-dark-secondary text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-gray-500 border border-light-border dark:border-dark-border;
  }

  /* 现代输入框 */
  .modern-input {
    @apply w-full rounded-md border border-light-border dark:border-dark-border bg-white dark:bg-dark-primary px-3 py-2 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 transition-all duration-300;
  }

  /* 现代导航栏 */
  .modern-navbar {
    @apply bg-white/80 dark:bg-dark-primary/80 backdrop-blur-md border-b border-light-border dark:border-dark-border shadow-sm transition-all duration-300;
  }

  /* 现代侧边栏 */
  .modern-sidebar {
    @apply bg-light-surface dark:bg-dark-surface border-r border-light-border dark:border-dark-border transition-all duration-300;
  }

  /* 现代表格 */
  .modern-table {
    @apply w-full bg-white dark:bg-dark-primary rounded-md shadow-lg dark:shadow-soft-dark overflow-hidden;
  }

  .modern-table th {
    @apply bg-light-secondary dark:bg-dark-secondary px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
  }

  .modern-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 border-t border-light-border dark:border-dark-border;
  }

  .modern-table tr:hover {
    @apply bg-light-surface dark:bg-dark-surface;
  }

  /* 现代模态框 */
  .modern-modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
  }

  .modern-modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300;
  }

  .modern-modal-content {
    @apply modern-card max-w-lg w-full max-h-[90vh] overflow-y-auto transform transition-all duration-300 animate-scale-in;
  }

  /* 现代徽章 */
  .modern-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-all duration-300;
  }

  .modern-badge-primary {
    @apply modern-badge bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200;
  }

  .modern-badge-success {
    @apply modern-badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
  }

  .modern-badge-warning {
    @apply modern-badge bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  }

  .modern-badge-error {
    @apply modern-badge bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  }

  /* 现代加载状态 */
  .modern-loading {
    @apply animate-pulse;
  }

  .modern-skeleton {
    @apply bg-gray-200 dark:bg-gray-700 rounded-md modern-loading;
  }

  /* 现代表单组 */
  .modern-form-group {
    @apply space-y-2;
  }

  .modern-form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
  }

  .modern-form-error {
    @apply text-sm text-red-600 dark:text-red-400;
  }

  .modern-form-help {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
}

/* 工具类扩展 */
@layer utilities {
  /* 主题感知的颜色工具类 */
  .text-theme-primary {
    color: var(--color-text-primary);
  }

  .text-theme-secondary {
    color: var(--color-text-secondary);
  }

  .bg-theme-primary {
    background-color: var(--color-bg-primary);
  }

  .bg-theme-secondary {
    background-color: var(--color-bg-secondary);
  }

  .bg-theme-surface {
    background-color: var(--color-bg-surface);
  }

  .border-theme {
    border-color: var(--color-border);
  }

  .shadow-theme {
    box-shadow: var(--shadow-base);
  }

  .shadow-theme-card {
    box-shadow: var(--shadow-card);
  }

  /* 响应式间距工具类 */
  .spacing-xs {
    @apply p-2 md:p-3;
  }

  .spacing-sm {
    @apply p-3 md:p-4;
  }

  .spacing-md {
    @apply p-4 md:p-6;
  }

  .spacing-lg {
    @apply p-6 md:p-8;
  }

  .spacing-xl {
    @apply p-8 md:p-12;
  }

  /* 网格布局工具类 */
  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  /* 滚动条样式 */
  .scrollbar-modern {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
  }

  .scrollbar-modern::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-modern::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-modern::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
  }

  .scrollbar-modern::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
  }

  /* 动画增强 */
  .animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
  }

  .animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out forwards;
  }

  .animate-fade-in-left {
    animation: fadeInLeft 0.3s ease-out forwards;
  }

  .animate-fade-in-right {
    animation: fadeInRight 0.3s ease-out forwards;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
